<script setup>
import { ref, reactive } from 'vue'
import { get, post } from '@/util/axios'
import { ElMessageBox  } from 'element-plus'
import {Search, CirclePlus, DeleteFilled, EditPen, Avatar, UserFilled} from '@element-plus/icons-vue'
import Editor from './edit.vue'
import {imgPath} from "@/util/index.js";

const username = ref('')
const tableData = reactive({
    list: [],
    pages: 0
})
const params = reactive({
    pageNo: 1,
    pageSize: 10,
    username: '',
    role: 1
})
const dialog = reactive({
    show: false,
    title: '',
    id: null
})
getTableData()
function getTableData () {
    get('/user/list', params , content => {
        tableData.list = content.records
        tableData.pages = content.pages
    })
}
function searchData () {
    params.pageNo = 1
    params.username = username.value
    getTableData()
}
function add () {
    dialog.id = null
    dialog.show = true
    dialog.title = '添加商家'
}
function update (id) {
    dialog.id = id
    dialog.show = true
    dialog.title = '修改商家信息'
}
function del(id, active) {
    const text = active ? '确定要解封该用户吗?' : '确定要封禁该用户吗?'
    ElMessageBox.confirm(text, '警告', {
        type: 'warning'
    }).then(() => {
        post('/user/', { id, active }, content => {
            getTableData()
        })
    }).catch(() => {})
}

</script>
<template>
    <div>
        <div class="filter">
            <el-input placeholder="请输入要搜索的用户名" v-model="username" ></el-input>
            <el-button type="primary" :icon="Search" @click="searchData">搜索</el-button>
            <el-button type="primary" :icon="CirclePlus" @click="add">添加商家</el-button>
        </div>
        <el-table :data="tableData.list" border>
            <el-table-column width="70px" label="编号" prop="id"></el-table-column>
            <el-table-column width="70px" label="头像">
                <template #default="scope">
                    <el-avatar :icon="UserFilled" :src="scope.row.icon?imgPath(scope.row.icon) : '/icon/default.jpg'"
                               prop="icon"/>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column show-overflow-tooltip label="邮箱" prop="email"></el-table-column>
            <el-table-column label="生日" prop="birthday"></el-table-column>
            <el-table-column width="80px" label="性别" prop="sex">
                <template #default="scope">
                    <span v-if="scope.row.sex">男</span>
                    <span v-else>女</span>
                </template>
            </el-table-column>
            <el-table-column width="80px" label="状态" prop="active">
                <template #default="scope">
                    <el-tag type="success"  effect="dark" v-if="scope.row.active">正常</el-tag>
                    <el-tag v-else type="danger" effect="dark">封禁</el-tag>
                </template>
            </el-table-column>
            <el-table-column width="180px" label="操作">
                <template #default="scope">
                    <template v-if="scope.row.active">
                        <el-button type="success" size="small" :icon="EditPen" @click="update(scope.row.id)">修改</el-button>
                        <el-button type="danger" size="small" :icon="DeleteFilled" @click="del(scope.row.id, 0)">封禁</el-button>
                    </template>
                    <el-button v-else type="warning" size="small" :icon="Avatar" @click="del(scope.row.id, 1)">还原</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                v-model:current-page="params.pageNo"
                :page-count="tableData.pages"
                @current-change="getTableData"/>
    </div>
    <el-dialog
            v-model="dialog.show"
            :title="dialog.title"
            :close-on-click-modal="false"
            width="500px">
        <Editor
                v-if="dialog.show"
                v-model:show="dialog.show"
                @getTableData="getTableData"
                :id="dialog.id"/>
    </el-dialog>
</template>


<style scoped lang="scss">
.el-pagination {
  margin-top: 20px;
}
.filter {
  margin-bottom: 20px;
  .el-input {
    width: 240px;
    margin-right: 10px;
  }
}
</style>